<template>
	<view class="content">
		<u-cell :border="false" :customStyle="{borderBottom: '1rpx solid #232639'}">
			<text slot="title" class="title">主页可见性</text>
			<view slot="value"class="value" @click="onShowSheet('home')">
				<text>{{userInfo.homeStatus | visible}}</text>
				<u-icon name="arrow-right" color="#ffffff"></u-icon>
			</view>
		</u-cell>
		<u-cell :border="false" :customStyle="{borderBottom: '1rpx solid #232639'}">
			<text slot="title" class="title">个人藏品页可见性</text>
			<view slot="value"class="value" @click="onShowSheet('collection')">
				<text>{{userInfo.collectionStatus | visible}}</text>
				<u-icon name="arrow-right" color="#ffffff"></u-icon>
			</view>
		</u-cell>
		<u-action-sheet @close="show = false" :show="show" :safeAreaInsetBottom="true">
			<view class="sheet">
				<view class="cell" @click="handleUpdate(k)" v-for="(v, k) in VisibleStatus" :key="k">{{v}}</view>
				<u-gap height="6" bgColor="#0a0a22"></u-gap>
				<view class="cell" @click="show = false">取消</view>
			</view>
		</u-action-sheet>
	</view>
</template>

<script>
	import {mapState, mapActions} from 'vuex'
	import { VisibleStatus } from '@/common/config/enums.js'
	export default {
		components: {
		},
		data() {
			return {
				show: false,
				field: '',
				userInfo: {},
				VisibleStatus
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			...mapActions('user', ['getUserInfo', 'updateHomeStatus', 'updateCollectionStatus']),
			getInfo(){
				this.getUserInfo().then(res => {
					this.userInfo = res.data
				})
			},
			onShowSheet(field){
				this.field = field
				this.show = true
			},
			handleUpdate(status){
				if(this.field == 'home'){
					this.updateHomeStatus({status: status}).then(res => {
						this.getInfo()
						this.show = false
					})
				} else {
					this.updateCollectionStatus({status: status}).then(res => {
						this.getInfo()
						this.show = false
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.title{
			color: #ffffff;
		}
		.value{
			display: flex;
			color: #ffffff;
		}
		.btn{
			background: transparent;
			border: 1rpx solid #999999;
			width: 50%;
			color: #999999;
			border-radius: 50rpx;
			font-size: 28rpx;
			margin-top: 80rpx;
		}
	}
	.sheet{
		background-color: #0a0a22;
		padding: 0;
		margin: 0;
		.cell{
			background-color: #232639;
			height: 80rpx;
			line-height: 80rpx;
			border: 1rpx solid #0a0a22;
		}
		.u-gap{
			background-color: #0a0a22;
		}
	}
</style>
